<template>
    <div id="admiringStudy">
        <div class="tutoring">
            <img src="./image/zuogediaocha.png" alt="">
            <div class="title">培训辅导</div>
        </div>
        <div class="matter">
            <!-- 面包屑 -->
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>辅导培训</el-breadcrumb-item>
                    <el-breadcrumb-item>慕课学习</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 目录 -->
            <div class="catalogue">
                <ol>
                    <li style="display: block;" v-if="active == 0"><img src="./image/zuogediaocha.png" alt=""></li>
                    <li v-if="active == 1">亲少年硬笔书法</li>
                    <li v-if="active == 2">成人零基础毛笔书法入门</li>
                    <li v-if="active == 3">硬笔正楷书写技巧与练习</li>
                    <li v-if="active == 4">毛笔书法的入门与鉴赏</li>
                </ol>
                <ul>
                    <li :class="active==0?'active':''" @click="tabs(0)">成人舞蹈培训</li>
                    <li :class="active==1?'active':''" @click="tabs(1)">亲少年硬笔书法</li>
                    <li :class="active==2?'active':''" @click="tabs(2)">成人零基础毛笔书法入门</li>
                    <li :class="active==3?'active':''" @click="tabs(3)">硬笔正楷书写技巧与练习</li>
                    <li :class="active==4?'active':''" @click="tabs(4)">毛笔书法的入门与鉴赏</li>
                </ul>
            </div>
            <!-- 远程搜索 -->
            <div class="searchRemote">
                v-model="searchInput"
            </div>
            <!-- 课程类型 -->
            <div class="courseTypes">
                <div class="title">课程类型：</div>
                <ul>
                    <li :class="courseTypesActive==0?'courseActive':''" @click="courseTypesTabs(0)">全部</li>
                    <li :class="courseTypesActive==1?'courseActive':''" @click="courseTypesTabs(1)">书法</li>
                    <li :class="courseTypesActive==2?'courseActive':''" @click="courseTypesTabs(2)">舞蹈</li>
                    <li :class="courseTypesActive==3?'courseActive':''" @click="courseTypesTabs(3)">练习</li>
                    <li :class="courseTypesActive==4?'courseActive':''" @click="courseTypesTabs(4)">鉴赏</li>
                </ul>
            </div>
            <!-- 课程分类 -->
            <div class="courseClassify">
                <div class="title">课程分类：</div>
                <ul>
                    <li :class="courseClassifyActive==0?'courseActive':''" @click="courseClassifyTabs(0)">全部</li>
                    <li :class="courseClassifyActive==2?'courseActive':''" @click="courseClassifyTabs(2)">书法</li>
                    <li :class="courseClassifyActive==3?'courseActive':''" @click="courseClassifyTabs(3)">技巧</li>
                </ul>
            </div>
            <!-- 内容列表 -->
            <div class="substance">
                 <!-- v-for="(item, index) in listData" :key="index" -->
                <div class="list">
                    <img src="./image/zuogediaocha.png" alt="">
                    <div class="base">
                        <div class="headline">成人零基础毛笔书法入门</div>
                        <div class="phase"><div>零基础</div></div>
                        <div class="bottom">
                            <div class="browse"><i class="el-icon-view"></i>9365</div>
                            <div class="button" @click="goCourseDetails"><div>在线观看</div></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="paging">
                <div class="page" @click="homePage">首页</div>
                <!-- @pagination="getListData"
                    :total="listData.length" -->
                <el-pagination background v-show="pageSize > 0"
                    :total="pageTotal"
                    layout="prev, pager, next"
                    prev-text="上一页"
                    next-text="下一页"
                    :page-size="pageSize"
                    @current-change="clickChange">
                </el-pagination>
                <div class="page" @click="trailingPage">尾页</div>
                <div class="pageOperate">当前第<span>{{pageNum}}</span>页/共{{pageNumber}}页</div>
                <div class="pageOperate">共{{pageTotal}}条数据</div>
                <div class="pageOperate">转到</div><el-input v-model="pageInput"></el-input>
                <div class="page" style="background: #F19417; color: white;" @click="goPage">go</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            active: 0, // 切换目录选项卡
            searchInput: '', // 远程搜索输入的内容
            courseTypesActive: 0, // 课程类型
            courseTypesActiveList: [], // 课程类型de列表
            courseClassifyActive: 0, // 课程分类
            courseClassifyActiveList: [], // 课程分类de列表
            pageNum: 1, // 显示第几页
            pageSize: 8, // 一页的数据数量
            pageNumber: "", // 共几页
            pageTotal: 21, // 一页的数据数量
            pageInput: '1', // 分页转到页数输入的内容
        };
	},
    mounted(){
        this.getPageNumber() // 共几页
    },
	methods: {
        // 切换目录选项卡
        tabs(index){
           this.active = index
        },
        // 点击切换课程类型
        courseTypesTabs(index){
           this.courseTypesActive = index
        },
        // 点击切换课程分类
        courseClassifyTabs(index){
           this.courseClassifyActive = index
        },
		// 点击跳转到课程详情
		goCourseDetails(){
			this.$router.push("/muke/courseDetails")
		},
        // 首页
        homePage() {
            this.clickChange(1)
        },
        // 当前页
        clickChange(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
        // 尾页
        trailingPage() {
            this.clickChange()
        },
        // 共几页
        getPageNumber() {
            // 有小数点进一
            let num = Math.ceil(this.pageTotal / this.pageSize)
            this.pageNumber = num
        },
        // 跳转到指定页
        goPage() {
            this.clickChange(this.pageInput)
        },
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #admiringStudy{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 培训辅导
        .tutoring{
            width: 100%;
            height: 200px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title{
                // color: white;
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
                position: absolute;
                left: 10%;
                bottom: 15%;
            }
        }
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin: 2% 0%;
            }
            // 目录
            .catalogue{
                display: flex;
                ol{
                    flex: 3;
                    li{
                        width: 100%;
                        height: 350px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                ul{
                    flex: 1;
                    .active{
                        color: #F19417;
                        background: #37251B;
                    }
                    li{
                        text-align: center;
                        line-height: 70px;
                        color: #FAD5A5;
                        background: #654A3A;
                    }
                }
            }
            // 远程搜索
            .searchRemote{
                margin: 2% 0%;
                text-align: right;
            }
            // 课程类型and课程分类
            .courseTypes,.courseClassify{
                padding: 0% 4%;
                margin-bottom: 1.5%;
                line-height: 20px;
                display: flex;
                font-size: 26rpx;
                .title{
                    flex: 1;
                    width: 20%;
                }
                ul{
                    flex: 12;
                    display: flex;
                    li{
                        // width: 8%;
                        padding: 0% 2%;
                        text-align: center;
                        border-radius: 5px;
                    }
                    .courseActive{
                        color: white;
                        background: #F19417;
                    }
                }
            }
            // 内容列表
            .substance{
                display: flex;
                flex-wrap: wrap; // 自动换行
                .list:hover{
                    box-shadow: 0px 9px 30px 0px rgba(64, 45, 20, 0.1);
                }
                .list{
                    width: 24%;
                    margin: 1% 0.5%;
                    border-radius: 5px;
                    img{
                        width: 100%;
                        height: 150px;
                        border-radius: 5px 5px 0px 0px;
                    }
                    .base{
                        padding: 0% 5%;
                        .headline{
                            line-height: 24px;
                            font-size: 16px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            // 单行溢出隐藏
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                        }
                        .phase{
                            display: flex;
                            font-size: 12px;
                            margin-top: 3%;
                            div{
                                width: 20%;
                                text-align: center;
                                border-radius: 4px;
                                color: #F19417;
                                border: 1px solid #F19417;
                            }
                        }
                        .bottom{
                            display: flex;
                            line-height: 25px;
                            margin: 3% 0%;
                            .browse{
                                flex: 3;
                                i{
                                    margin-right: 3%;
                                }
                            }
                            .button{
                                flex: 1;
                                text-align: center;
                                div{
                                    color: white;
                                    border-radius: 5px;
                                    background: #F19417;
                                }
                            }
                        }
                    }
                }
            }
            // 分页
            .paging{
                width: 100%;
                margin: 5% 0%;
                // 水平垂直居中
                display: flex;
                justify-content: center;
                align-items: center;
                /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                    background-color: #F19417;
                }
                .page{
                    padding: 0% 1%;
                    text-align: center;
                    line-height: 30px;
                    border: 1px solid #E6E6E6;
                    border-radius: 6px;
                    margin: 0% 0.5%;
                }
                .pageOperate{
                    margin-left: 1%;
                    span{
                        color: #F19417;
                    }
                }
                /deep/.el-input{
                    width: 4%;
                    margin-left: 1%;
                    /deep/.el-input__inner{
                        height: 30px;
                    }
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){    
    #admiringStudy{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 培训辅导
        .tutoring{
            width: 100%;
            height: 200px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title{
                // color: white;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                position: absolute;
                left: 10%;
                bottom: 15%;
            }
        }
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin: 2% 0%;
            }
            // 目录
            .catalogue{
                display: flex;
                ol{
                    flex: 3;
                    li{
                        width: 100%;
                        height: 295px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                ul{
                    flex: 1;
                    .active{
                        color: #F19417;
                        background: #37251B;
                    }
                    li{
                        text-align: center;
                        line-height: 60px;
                        color: #FAD5A5;
                        background: #654A3A;
                    }
                }
            }
            // 远程搜索
            .searchRemote{
                margin: 2% 0%;
                text-align: right;
            }
            // 课程类型and课程分类
            .courseTypes,.courseClassify{
                padding: 0% 4%;
                margin-bottom: 1.5%;
                line-height: 20px;
                display: flex;
                font-size: 24rpx;
                .title{
                    flex: 1;
                    width: 20%;
                }
                ul{
                    flex: 12;
                    display: flex;
                    li{
                        // width: 8%;
                        padding: 0% 2%;
                        text-align: center;
                        border-radius: 5px;
                    }
                    .courseActive{
                        color: white;
                        background: #F19417;
                    }
                }
            }
            // 内容列表
            .substance{
                display: flex;
                flex-wrap: wrap; // 自动换行
                .list:hover{
                    box-shadow: 0px 9px 30px 0px rgba(64, 45, 20, 0.1);
                }
                .list{
                    width: 24%;
                    margin: 1% 0.5%;
                    border-radius: 5px;
                    img{
                        width: 100%;
                        height: 120px;
                        border-radius: 5px 5px 0px 0px;
                    }
                    .base{
                        padding: 0% 5%;
                        .headline{
                            line-height: 24px;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            // 单行溢出隐藏
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                        }
                        .phase{
                            display: flex;
                            font-size: 10px;
                            margin-top: 2%;
                            div{
                                width: 20%;
                                text-align: center;
                                border-radius: 4px;
                                color: #F19417;
                                border: 1px solid #F19417;
                            }
                        }
                        .bottom{
                            display: flex;
                            line-height: 22px;
                            margin: 2% 0%;
                            .browse{
                                flex: 3;
                                i{
                                    margin-right: 3%;
                                }
                            }
                            .button{
                                flex: 1;
                                text-align: center;
                                div{
                                    color: white;
                                    border-radius: 5px;
                                    background: #F19417;
                                }
                            }
                        }
                    }
                }
            }
            // 分页
            .paging{
                width: 100%;
                margin: 5% 0%;
                // 水平垂直居中
                display: flex;
                justify-content: center;
                align-items: center;
                /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                    background-color: #F19417;
                }
                .page{
                    padding: 0% 1%;
                    text-align: center;
                    line-height: 30px;
                    border: 1px solid #E6E6E6;
                    border-radius: 6px;
                    margin: 0% 0.5%;
                }
                .pageOperate{
                    margin-left: 1%;
                    span{
                        color: #F19417;
                    }
                }
                /deep/.el-input{
                    width: 4%;
                    margin-left: 1%;
                    /deep/.el-input__inner{
                        height: 30px;
                    }
                }
            }
        }
    }
}
</style>